postcss-merge-rules

What is postcss-merge-rules?

The postcss-merge-rules npm package is designed to optimize CSS by merging CSS rules with identical selectors or declarations. This can lead to smaller CSS files and potentially faster load times for web pages.

What are postcss-merge-rules's main functionalities?

Merging based on identical selectors

This feature combines rules with identical selectors into a single rule. In the code sample, two rules for the 'a' selector are merged into one.

const postcss = require('postcss');
const mergeRules = require('postcss-merge-rules');

const css = `a { color: blue; }
a { font-size: 14px; }`;

postcss([mergeRules()])
.process(css, { from: undefined })
.then(result => console.log(result.css));

Merging based on identical declarations

This feature merges rules that have identical declarations but different selectors, creating a grouped selector. The code sample demonstrates merging two rules that apply the same color declaration to different selectors.

const postcss = require('postcss');
const mergeRules = require('postcss-merge-rules');

const css = `a { color: blue; }
b { color: blue; }`;

postcss([mergeRules()])
.process(css, { from: undefined })
.then(result => console.log(result.css));

Other packages similar to postcss-merge-rules

cssnano

cssnano is a modular CSS minifier that includes functionalities similar to postcss-merge-rules as part of its optimizations. It can merge rules as well as perform other optimizations like reducing whitespace and minifying font weights.

clean-css

clean-css is another CSS minifier that offers functionalities to merge CSS rules among other optimizations. It focuses on efficiency and performance, providing an alternative to postcss-merge-rules with a broader scope of CSS optimization techniques.

README

postcss-merge-rules

Merge CSS rules with PostCSS.

Install

With npm do:

npm install postcss-merge-rules --save

Examples

This module will attempt to merge adjacent CSS rules:

By declarations

Input

a {
    color: blue;
    font-weight: bold
}

p {
    color: blue;
    font-weight: bold
}

Output

a,p {
    color: blue;
    font-weight: bold
}

By selectors

Input

a {
    color: blue
}

a {
    font-weight: bold
}

Output

a {
    color: blue;
    font-weight: bold
}

By partial declarations

Input

a {
    font-weight: bold
}

p {
    color: blue;
    font-weight: bold
}

Output

a,p {
    font-weight: bold
}

p {
    color: blue
}

Usage

See the PostCSS documentation for examples for your environment.

Contributing

Pull requests are welcome. If you add functionality, then please add unit tests to cover it.

License

MIT © Ben Briggs